<template>
  <div class="container-body">
    <div v-if="dataList.length">
      <section class="list" ref="list">
        <section class="add-item" :class="{active: item.activeItem}" v-for="(item, index) in dataList" :key="index">
          <div @click="handleItem(item, $event)" class="item-center">
            <section class="item-container">

              <section class="container-left">
                <i class="el-icon-notebook-2 active"></i>

                <!--                  <img class="left-icon active" src="~@/assets/img/yetSubscription.png" alt=""/>-->
                <!--                  <img class="left-icon normal" src="~@/assets/img/noSubscription.png" alt=""/>-->
              </section>
              <section class="title-item">
                <section>{{ item.modularName }}</section>
                <section class="item-description" @click="infoHandler(item.modularDescribe)">模块说明</section>
              </section>

              <!-- <section class="icon-item" v-if="item.isDefault === 1">默认</section> -->
              <!--              <section class="container-item">-->
              <!--                  未订阅-->
              <!--              </section>-->

            </section>
          </div>
          <!--          <section class="mark" style="">-->
          <!--&lt;!&ndash;              <img class="mark-icon normal" src="~@/assets/img/noSubscriptionIcon.png" alt="">&ndash;&gt;-->
          <!--              <img class="mark-icon active" src="~@/assets/img/yetSubscriptionIcon.png" alt=""/>-->
          <!--          </section>-->
          <section class="but-container">
            <el-checkbox-group v-model="areaList" @change="checked=>addIds(checked, index)">
              <el-checkbox :label="item">{{ }}</el-checkbox>
            </el-checkbox-group>
          </section>
        </section>
      </section>
      <section style="margin:50px auto;width:40px">
        <el-button type="primary" @click="add">订阅</el-button>
      </section>
      <InfoForm ref="infoForm"></InfoForm>
    </div>
    <!--  展示无数据页面   -->
    <Empty v-else></Empty>
  </div>
</template>

<script>
import {save, getUnearnedModular} from '@/api/modular/modular.js'
import InfoForm from './infoForm'

export default {
  data() {
    return {
      areaList: [],
      addItemList: [],
      addForm: {
        modularIds: '',
        modularNames: '',
        tenantId: '773481232943165456',
        applyDate: ''
      },
      value: true,
      tips: '努力加载中...',
      count: 10,
      loading: false,
      dataList: [],
      checkList: []

    }
  },
  components: {
    InfoForm
  },
  methods: {
    // 获取未订阅数据
    getUnearnedModular(props) {
      this.loading = true
      getUnearnedModular({}).then((res) => {
        if (res.data.code === '200') {
          this.dataList = res.data.result
          console.log(1111)
          console.log(this.dataList)
        }
        this.loading = false
      })
    },
    infoHandler(modularDescribe) {
      this.$refs.infoForm.init('view', modularDescribe)
    },
    del(index) {

    },
    add() {
      save(this.areaList).then((res) => {
        if (res.data.code === '200') {
          this.$message({
            message: '订阅成功',
            type: 'success'
          })
          this.editVisible = false
          this.$emit('refreshDataList')
          this.getUnearnedModular()
        }
      })
    },
    handleItem(item, event) {
      const parent = event.currentTarget.parentElement
      if (parent.classList.value.indexOf('active') === -1) {
        parent.classList.add('active')
        this.areaList.push(item)
      } else {
        parent.classList.remove('active')
        this.areaList.splice(this.areaList.indexOf(item), 1)
      }
    },
    addIds(ids, index) {
      const nowItem = this.$refs.list.children[index]
      this.areaList = ids
      if (nowItem.classList.value.indexOf('active') === -1) {
        nowItem.classList.add('active')
      } else {
        nowItem.classList.remove('active')
      }
    },
    edit() {
      this.$refs.areaForm.init('add')
    }
  },
  mounted() {
    this.getUnearnedModular()
    this.addItemList = document.querySelectorAll('.add-item')
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/config.scss";

.container-body {
  // margin: 0 auto;
  padding: 20px;

  .title-container {
    font-size: $title-font-size;
    font-weight: 400;
    color: #666666;
    padding-bottom: 20px;
  }

  .list {
    display: flex;
    width: 100%;
    flex-direction: row; /*设置子元素的排列方向*/
    flex-wrap: wrap; /*溢出则换行*/
  }

  .add-item {
    margin-left: 0.5%;
    margin-right: 0.5%;
    width: 19%;
    min-width: 210px;
    margin-bottom: 10px;
    height: 110px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.05);
    border-radius: 6px;
    position: relative;

    .container-left {
      i {
        font-size: 45px;
        color: #DDDDDD;
      }
    }

    .item-container {
      display: flex;
      position: relative;

      /*.left-icon{*/
      /*    width: 48px;*/
      /*    height: 45px;*/
      /*}*/
      /*.left-icon.active{*/
      /*    display: none;*/
      /*}*/
    }

    .title-item {
      margin-left: 20px;
      font-size: $title-font-size;
      font-weight: 400;
      color: #AAAAAA;

      .item-description {
        margin-top: 10px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-decoration: underline;
        color: #333333;
        cursor: pointer;
      }
    }

    /*.mark{*/
    /*    position: absolute;*/
    /*    right: 0;*/
    /*    top: 0;*/
    /*    width: 70px;*/
    /*    .mark-icon{*/
    /*        width: 100%;*/
    /*        height: 100%;*/
    /*        object-fit: fill;*/
    /*    }*/
    /*    .mark-icon.active{*/
    /*        display: none;*/
    /*    }*/
    /*}*/
    .icon-item {
      background-color: rgb(245, 154, 35);
      padding: 2px 10px;
      color: #fff;
      font-size: 12px;
      position: absolute;
      right: 10px;
      top: 10px;
      border-radius: 3px;
    }

    .container-item {
      margin: 2% 0;
      padding-left: 10px;
      padding-right: 10px;
      font-size: $container-font-size;
      font-weight: 400;
      color: #999999;
    }

    .but-container {
      font-size: $title-font-size;
      font-weight: 400;
      color: #666666;
      display: flex;
      position: absolute;
      right: 15px;
      bottom: 7px;
    }
  }

  .add-item:hover, .add-item.active {
    border: 1px solid $--color-primary-liyu;
    /*.mark-icon.normal{*/
    /*    display: none;*/
    /*}*/
    /*.mark-icon.active{*/
    /*    display: block;*/
    /*}*/
    .container-left {
      i {
        color: $--color-primary-liyu;
      }
    }

    /*.left-icon.normal{*/
    /*    display: none;*/
    /*}*/
    /*.left-icon.active{*/
    /*    display: block;*/
    /*}*/
    .title-item {
      color: #333333;

      .item-description {
        color: $--color-primary-liyu;
      }
    }
  }

  .list1 {
    width: 300px;
    height: 150px;
  }
}

.item-center {
  width: 100%;
  height: 100%;
  padding: 20px 0 0 20px;
}

::v-deep .el-dialog__footer {
  margin-top: -20px !important;
  padding: 0px 20px 15px !important;
  margin-bottom: 16px;
}
</style>
